iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
Modern Web

Déjà-vu ? 要 Vue 過才知道系列 第 9

Vue.js 實作簡易圖片瀏覽

  • 分享至 

  • xImage
  •  

原來純文字也可以是任意門。

我們已經學了好幾個常用的v-指令(Directives),今天我們就來用這幾個指令來實作圖片的瀏覽。

先把功能列出來:

  • 圖片可以一張張瀏覽
  • 可以選擇上一張、下一張切換
  • 如果第一張就沒有上一張的按鈕; 如果最後一張就沒有下一張的按鈕

邏輯部分:

  • 圖片的網址可以以陣列包起來
  • 使用v-for,並把index也取出來,只要是下一張index+1,上一張index-1
  • 上下張按鈕用@click綁定,可以用v-if來控制,index不是 0,以及index小於陣列長度-1 來辦到

Vue 實例的部分

  • Data初始化資料
  • methods綁定 DOM 的觸發

開始囉~
先看Codepen實際會跑的狀況

HTML 部分

<div id="show-photos">
    <a href="#" @click="prev" v-show="index != 0">prev</a>
    <span> | </span>
    <a href="#" @click="next" v-show="index < imgArray.length-1">next</a>
    <hr/>
    <img :src="imgArray[index]" title=""/>
</div>

JS Vue 實例部分
記得要把 Vue.js 載入文件裡喔~

const vm = new Vue({
  el: '#show-photos',
  data: {
    imgArray: [
      'http://aydasunuroglu.com/wp-content/uploads/se_terramadre01.jpg',
      'http://aydasunuroglu.com/wp-content/uploads/se_terramadre02.jpg',
      'http://aydasunuroglu.com/wp-content/uploads/se_terramadre03.jpg',
      'http://aydasunuroglu.com/wp-content/uploads/se_terramadre06.jpg',
      'http://aydasunuroglu.com/wp-content/uploads/se_terramadre04.jpg',
    ],
    index: 0,
  },
  methods: {
    prev: function () {
      this.index--;
    },
    next: function () {
      this.index++;
    },
  },
});

有沒有發現使用 Vue 可以讓程式碼變得很簡單?我們也可以加上自動播放的功能,大家可以試試看喔~

每日一句法文有益身心:Pardon ! --> 八.喝.動! 抱歉!(不小心的狀況下,例:踩到別人的腳)。


上一篇
v- 指令 顯示切換和屬性綁定
下一篇
v- 指令 v-for 列表渲染與操控
系列文
Déjà-vu ? 要 Vue 過才知道30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言